<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加预约信息表单</title>
  <!--引入elementui得样式-->
  <link type="text/css" rel="stylesheet" href="/css/index.css"/>
  <!--引入vue得依赖必须再elementui之前引入vue-->
  <script type="text/javascript" src="/js/vue.js"></script>
  <script type="text/javascript" src="/js/index.js"></script>
  <script type="text/javascript" src="/js/axios.min.js"></script>
  <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
  <div id="app">
   <div id="yuyuebox">
      <div style="margin: auto">
        <el-form :label-position="labelPosition"
                 label-width="80px"
                 :model="formLabelAlign"
                 status-icon :rules="loginrules"
                 ref="ruleForm">
          <el-form-item label="患者身份证号" prop="idcard">
            <el-input  style="width: 400px" v-model="formLabelAlign.idcard"  placeholder="请输入患者身份证号"></el-input>
          </el-form-item>
          <el-form-item label="患者姓名" prop="regName">
            <el-input style="width: 400px" v-model="formLabelAlign.regName" placeholder="请输入患者姓名"></el-input>
          </el-form-item>
            <el-form-item label="患者性别" prop="sex">
                <el-radio v-model="radio" label="男">男</el-radio>
                <el-radio v-model="radio" label="女">女</el-radio>
            </el-form-item>
          <el-form-item label="挂号人手机号码" prop="phonenumber">
            <el-input style="width: 400px" v-model="formLabelAlign.phonenumber" placeholder="请输入挂号人手机号码"></el-input>
          </el-form-item>
          <el-form-item label="短信验证码">
            <el-input style="width: 400px" v-model="formLabelAlign.type" placeholder="请输入短信验证码"></el-input>
          </el-form-item>
<!--          <el-button class="but" type="primary" @click.native.prevent="login()">获取验证码</el-button>-->
        </el-form>
      </div>

       <el-button class="but1" type="primary" @click.native.prevent="quguahao()">去挂号</el-button>
       <el-button class="but2" type="danger" >取消</el-button>

       <!--付款弹出层-->
       <el-dialog
               title="确认支付"
               :visible.sync="dialogVisible"
               width="30%"
               :before-close="handleClose">
           <span>点击立即支付去支付</span>
           <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="pay">确 定</el-button>
  </span>
       </el-dialog>

   </div>
  </div>
</body>
<script>
    var url = window.location.href;
    var arr = url.split("&");
    var infoArr=[];
    for (let i = 0; i < arr.length ; i++) {
        var a = arr[i].split("=")[1];
        console.log(a)
        infoArr[i]=a;
    }

  var app = new Vue({
      el:"#app",
        data:{
        //点击预约排班信息时获取的排班信息id
        schedulingId:0,
        //顶部对齐
        labelPosition: 'top',
        //表单对象
        formLabelAlign:{},
        radio:"男",
        addform:{},
        //表单的校验规则
        sectionId:0,
        dialogVisible:false,
        price:0,
        loginrules:{
        idcard: [
          { required: true, message: '请输入患者身份证号', trigger: 'blur' }
        ],
        regName:[
          { required: true, message: '请输入患者姓名', trigger: 'blur' }
        ],
        phonenumber:[
          { required: true, message: '请输入挂号人手机号码', trigger: 'blur' }
        ]
      }
    },
    methods:{
        quguahao(){
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    app.formLabelAlign.shcedulingId=infoArr[0];
                    app.formLabelAlign.adminId=infoArr[1];
                    app.formLabelAlign.regDate=infoArr[2];
                    app.formLabelAlign.sectionId=infoArr[3];
                    app.formLabelAlign.sex=app.radio;
                    console.log(app.formLabelAlign);
                    axios.post("reg/addReg",this.formLabelAlign).then(result=>{
                        if (result.data.code===200){
                            this.$message.success("挂号成功")
                            this.dialogVisible=true;
                            // window.location.herf="indexZhiFu.html";
                        }
                    })
                }
            });
        },
        pay(){
            this.price=infoArr[4];
            this.schedulingId=infoArr[0];
            console.log(this.price);
            console.log(this.schedulingId);
            window.open("http://localhost:8080/apiPay/pay?price="+this.price+"&schedulingId="+this.schedulingId)
            this.$message.success("请求支付宝成功");
        },
    }
  })
</script>
<style>
  #yuyuebox{
  width: 400px;
  height: 600px;
  margin: 50px auto;
    /*border: silver solid 1px;*/
}
  .but1{
      width:100px;
      margin-left: 80px;
  }
  .but2{
      width: 100px;
      margin-right: 80px;
  }
</style>
</html>